<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>留言板</title>
    <script type="text/javascript">
        let messages_array = [];
        let function_2 = function () {
            let userName = document.getElementById('userName');
            let message = document.getElementById("message");
            let messages = document.getElementById("messages");
            let messages_value = "[" + userName.value + "]说：" + message.value + "";
            messages_array.unshift(messages_value);
            if (messages_array.length > 10) {
                messages_array.pop();
            }
            messages.value = messages_array.join("\n");
        }

        function function_1() {
            let userName = document.getElementById('userName');
            let message = document.getElementById("message");
            let messages = document.getElementById("messages");
            userName.value = "";
            message.value = "";
            messages.value = "";
            messages_array = [];
        }
    </script>
</head>
<body>
<label for="userName">姓名 </label><input type="text" id="userName">
<br>
<label>
    留言
    <textarea rows="3" cols="30" id="message" style="resize: none;vertical-align: top"></textarea>
</label>
<br>
<button onclick="function_1()">重置</button>
<br>
<button onclick="function_2()">留言</button>
<hr>
<label>
    <textarea rows="10" cols="50" disabled="disabled" id="messages" style="resize: none"></textarea>
</label>
</body>
</html>